<template>
    <div class="app">
      <h1>Vue 3 条件渲染示例</h1>
      <button @click="toggle">切换显示</button>
  
      <div>
        <h2 v-if="isVisible">这是使用 v-if 显示的文本。</h2>
        <h2 v-show="isVisible">这是使用 v-show 显示的文本。</h2>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const isVisible = ref(true); // 控制文本显示的状态
  
  // 切换显示状态的函数
  const toggle = () => {
    isVisible.value = !isVisible.value; // 切换布尔值
  };
  </script>
  
  <style scoped>
  .app {
    text-align: center;
    margin-top: 50px;
  }
  button {
    margin-bottom: 20px;
    padding: 10px 15px;
  }
  </style>